<template>
	<view class="my">
		<view class="banner">
			<view class="">
				<image src="../../static/img/uc_qdfq_119x31_@2x.png" mode=""></image>
				<view class="titleEnglish">ZBJ Financial</view>
				<button type="button" @click="login">登录/注册</button>
			</view>
			<view class="myGrid">
				<navigator url="./stages">
					<view >
						<image src="../../static/img/uc_instalment_28x34_@2x.png" mode=""></image>
						我的分期
					</view>
				</navigator>
				<view >
					<image src="../../static/img/uc_vip_service_34x28_@2x.png" mode=""></image>
					星享服务
				</view>
				<navigator url="./bankCard"><view >
					<image src="../../static/img/uc_bankcard_35x29_@2x.png" mode=""></image>
					银行卡
				</view></navigator>
			</view>
		</view>
		<view class="main">
			<view class="information">
				<view class="myInformation" @click="redirectToFn('myData')"><image src="../../static/img/uc_info_13x14_@2x.png" mode=""></image>我的信息</view>
				<navigator url="./wallet">
					<view class="myBill"><image src="../../static/img/uc_bill_14x14_@2x.png" mode=""></image>我的账单</view>
				</navigator>
				<view class="paymentHistory"><image src="../../static/img/uc_repayRecord_13x13_@2x.png" mode=""></image>还款记录</view>
			</view>
			<navigator url="./setting"><view class="setting"><image src="../../static/img/uc_setting_14x14_@2x.png" mode=""></image>设置</view></navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				
			}
		},
		methods:{
			login(){
				uni.redirectTo({
				    url: '../login/index'
				});
			},
			redirectToFn(url){
				uni.redirectTo({
				    url: './myData'
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
		}
	.banner{
		width: 100%;
		height: 520rpx;
		color: #fff;
		background:url(../../static/img/bill_top_bg_375x245_@2x.png) no-repeat center;
		text-align: center;
		image{
			width: 250rpx;
			height: 70rpx;
			margin-top: 100rpx;
		}
		button{
			width: 440rpx;
			height: 90rpx;
			color: #38434d;
			text-align: center;
			line-height: 90rpx;
			border-radius: 80rpx;
			margin-top: 60rpx;
			font-size: 32rpx;
		}
		.myGrid{
			margin-top: 30rpx;
			display: flex;
			justify-content: space-around;
			view{
				width: 210rpx;
				height: 164rpx;
				background-color: #fff;
				box-shadow: 1 2 2 (rgba 000,000,000,.5);
				border-radius: 10rpx;
				color: #38434d;
				font-size: 32rpx;
				padding: 20rpx;
				box-sizing: border-box;
				text-align: left;
				image{
					display: block;
					width: 60rpx;
					height: 70rpx;
					margin:0 0 20rpx;
				}
			}
		}
	}
	.main{
		// height: 520rpx;
		width: 100%;
		text-align: center;
		padding-top: 100rpx;
		
		.information{
			width: 690rpx;
			height: 276rpx;
			background-color: #fff;
			margin: 0 auto;
			box-sizing: border-box;
			padding: 10rpx 20rpx;
			view{
				line-height: 90rpx;
				text-align: left;
				border-bottom: 4rpx solid #f9f9f9;
				font-size: 28rpx;
				color: #4f4f4f;
				// padding-left: 80rpx;
				&:nth-child(3){
					border: none;
				}
				image{
					width: 44rpx;
					height: 40rpx;
					vertical-align: middle;
					padding-right: 30rpx;
				}
			}
		}
		.setting{
			width: 690rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: left;
			background-color: #fff;
			margin: 20rpx auto 0 ;
			font-size: 28rpx;
			color: #4f4f4f;
			padding-left: 20rpx;
			box-sizing: border-box;
			image{
				width: 44rpx;
				height: 40rpx;
				vertical-align: middle;
				padding-right: 30rpx;
			}
		}
	}
</style>
